<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>


    <!-- CSS
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <link rel="stylesheet" href="https://baoming.lifang.biz/styles/front/css/normalize.css">
    <link rel="stylesheet" href="https://baoming.lifang.biz/styles/front/css/skeleton.css">
    <link rel="stylesheet" href="https://baoming.lifang.biz/styles/front/custom/css/custom.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/amazeui.css" />

<link rel="stylesheet" href="css/activity.css" />

</head>

<body class="am-with-topbar-fixed-top">

	<ul id="myTab" class="nav nav-tabs">
		<li class="active"><a href="#activity" data-toggle="tab"> 活动列表 </a></li>
		<li><a href="#home" data-toggle="tab">发起活动</a></li>
	</ul>

	<div id="myTabContent" class="tab-content">
		<div class="tab-pane fade " id="home">
			<div class="am-u-sm-12">

				<div class="card-box">

					<h4 class="header-title m-t-0 m-b-30">发起活动</h4>

					<div class="am-g">
						<div class="am-u-md-12">
							<form id="ajaxForm" class="am-form am-text-sm"
								action="/add_activity" method="post">
								<div class="am-form-group">
									<div class="am-g">
										<label class="am-u-md-2 am-md-text-right am-padding-left-0"
											for="doc-ipt-text-1">活动标题</label> <input
											class="am-u-md-10 form-control" name="name"
											placeholder="对活动的简短说明">
									</div>
								</div>

								<div class="am-form-group">
									<div class="am-g">
										<label class="am-u-md-2 am-md-text-right am-padding-left-0"
											for="doc-ipt-email-1">活动地址</label> <input
											class="am-u-md-10 form-control" name="address"
											placeholder="请输入活动举办地址">
									</div>
								</div>

								<div class="am-form-group">
									<div class="am-g">
										<label class="am-u-md-2 am-md-text-right am-padding-left-0"
											for="doc-ipt-email-1">活动开始时间</label> <input
											class="am-u-md-10 form-control datepicker" name="startTime"
											size="30">
									</div>
								</div>

								<div class="am-form-group">
									<div class="am-g">
										<label class="am-u-md-2 am-md-text-right am-padding-left-0"
											for="doc-ipt-email-1">活动结束时间</label> <input
											class="am-u-md-10 form-control datepicker" name="endTime"
											size="30">
									</div>
								</div>

								<div class="am-form-group">
									<div class="am-g">
										<label class="am-u-md-2 am-md-text-right am-padding-left-0"
											for="doc-ipt-email-1">报名截至时间</label> <input
											class="am-u-md-10 form-control datepicker"
											name="registrationDeadline" size="30">
									</div>
								</div>

								<div class="am-form-group">
									<div class="am-g">
										<label class="am-u-md-2 am-md-text-right am-padding-left-0"
											for="doc-ta-1">活动内容说明</label>
										<textarea class="am-u-md-10 form-control" rows="5"
											id="doc-ta-1"> </textarea>
									</div>
								</div>
								<div class="am-form-group">
									<div class="am-g">
										<label class="am-u-md-2 am-md-text-right am-padding-left-0"
											for="doc-ta-1">报名需填写信息</label>

										<div class="am-u-md-12 form-control border">
											<button type="button" name="form"
												class="am-btn am-btn-default form-btn">姓名</button>
											<button type="button" name="form"
												class="am-btn am-btn-default form-btn">性别</button>
											<button type="button" name="form"
												class="am-btn am-btn-default form-btn">年龄</button>
											<button type="button" name="form"
												class="am-btn am-btn-default form-btn">手机</button>
											<button type="button" name="form"
												class="am-btn am-btn-default form-btn">公司名称</button>
											<button type="button" name="form"
												class="am-btn am-btn-default form-btn">部门</button>
											<button type="button" name="form"
												class="am-btn am-btn-default form-btn">职位</button>
											<button type="button" name="form"
												class="am-btn am-btn-default form-btn">学历</button>
											<button type="button" name="form"
												class="am-btn am-btn-default form-btn">定位</button>
											<button type="button" name="form"
												class="am-btn am-btn-default form-btn">备注</button>

											<br>
											<br>
											<br>
											<br>
											<button type="button" id="deBtn" data-toggle="modal"
												data-target="#myModal" class="am-btn am-btn-success">添加自定义</button>
										</div>

									</div>
								</div>
								<button type="button" onclick="submits()"
									class="am-btn am-btn-primary">确认无误，发布</button>

							</form>
						</div>

					</div>

				</div>
			</div>

		</div>
		<div class="tab-pane fade in active" id="activity">
			<div class="am-u-sm-12">

				<div class="card-box">

					<h4 class="header-title m-t-0 m-b-30">活动列表</h4>

					<div class="am-g">
						<div class="am-u-md-12">
							<table class="u-full-width" id="tb">
								<thead>
									<tr>
										<th>序号</th>
										<th>活动名称</th>
										<th>活动开始时间</th>
										<th>活动结束时间</th>
										<th>报名截至时间</th>
										<th>活动地址</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									#for(activity : activityList))
									<tr>
										<td>#(for.index+1)</td> 
										<td>#(activity.name)</td>
										<td>#date(activity.startTime)</td>
										<td>#date(activity.endTime)</td>
										<td>#date(activity.registrationDeadline)</td>
										<td>#(activity.address)</td>
										<td>
											<button type="button" 
												class="am-btn am-btn-primary " onclick="views('#(activity.id)')" >查看</button>
												<button type="button" 
												class="am-btn am-btn-primary " onclick="registerActivity('#(activity.id)')" >报名</button>
												<a 
												class="am-btn am-btn-primary " href="/delete_activity/#(activity.id)">删除</a>
										</td>
									</tr>
									 #end
								</tbody>
							</table>
						
						</div>

					</div>

				</div>
			</div>

		</div>

	</div>



	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">自定义报名数据</h4>
				</div>
				<div class="modal-body">
					<form role="form">
						<div class="form-group">
							<label for="name">数据名称</label> <input type="text" name="dataname"
								class="form-control" placeholder="文本输入">
						</div>

						<div class="form-group">
							<label for="name">数据类型</label> <select id="myselect"
								class="form-control">
								<option value="1">单行输入框</option>
								<option value="2">多行输入框</option>
								<option value="3">单选</option>
								<option value="4">多选</option>
							</select>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" onclick="addBtn()" class="btn btn-primary">
						添加</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
	$(document).ready(function() {
		$(".datepicker").datepicker();
		$(".datepicker").datepicker("option", "dateFormat", "yy-mm-dd");
		$(".form-btn").on("click", function() {
			if ($(this).hasClass("am-btn-default")) {
				$(this).removeClass("am-btn-default");
				$(this).addClass("am-btn-success");
			} else {
				$(this).removeClass("am-btn-success");
				$(this).addClass("am-btn-default");
			}
		});
		
		

	});
	
	function views(id){
		alert("活动id："+id);
		window.location = "/show_registration_list/"+id
		
	}
	
	function submits() {
		console.log("ssssssssssssssssssssss");

		var name = $("input[name='name']").val();
		var address = $("input[name='address']").val();
		var startTime = $("input[name='startTime']").val();
		var endTime = $("input[name='endTime']").val();
		var registrationDeadline = $("input[name='registrationDeadline']")
				.val();

		var names = "";
		var types = "";
		// 			var types= new Array();
		// 			var i=0,j=0;
		$(".form-btn").each(function() {
			if ($(this).hasClass("am-btn-success")) {
				console.log($(this).text())
				console.log($("#myselect").val())

				var namex = $(this).text();
				var type = $("#myselect").val();
				names = names + "," + namex;
				types = types + "," + type;
			} else {
			}
		});
		$.ajax({
			type : "post",
			url : "/add_activity",
			data : {
				'names' : names,
				"types" : types,
				'name' : name,
				'address' : address,
				'startTime' : startTime,
				'endTime' : endTime,
				'registrationDeadline' : registrationDeadline
			},
			dataType : 'json',
			success : function(data) {
				alert("创建活动成功");
				window.location = "/";
			}
		});
	}
	
	function registerActivity(id){
		window.location = "/registration/"+id;
		
	}
	
	function addBtn() {

		console.log("ss")
		$("#deBtn").before(
				'<button type="button" name="form" class="am-btn am-btn-default form-btn">'
						+ $("input[name='dataname']").val() + '</button>');
		$(".form-btn").unbind();
		$(".form-btn").on("click", function() {
			if ($(this).hasClass("am-btn-default")) {
				$(this).removeClass("am-btn-default");
				$(this).addClass("am-btn-success");
			} else {
				$(this).removeClass("am-btn-success");
				$(this).addClass("am-btn-default");
			}
		});
	}
</script>

</html>